<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <script src="{$oss}/active/newyear/js/rem.js"></script>
    <title>生日权益</title>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body {
        overflow-x: hidden;
        width: 7.5rem;
        margin: 0 auto;
    }

    .content {
        font-size: 0;
        position: relative;
    }

    .content .top-box {
        width: 100%;
        height: 4.2rem;
        position: relative;
    }

    .content .top-box .bg-left {
        width: 2rem;
        height: 2.65rem;
        position: absolute;
        left: 0;
        top: 0;
        background: url("{$oss}/web/static/birthday2/lucky_left.png") no-repeat left top;
        background-size: 100% auto;
    }

    .content .top-box .bg-right {
        width: 2rem;
        height: 2.65rem;
        position: absolute;
        right: 0;
        top: 0;
        background: url("{$oss}/web/static/birthday2/lucky_right.png") no-repeat right top;
        background-size: 100% auto;
    }

    .content .top-box .bg-title {
        width: 100%;
        height: 2.08rem;
        position: absolute;
        right: 0;
        top: 1.7rem;
        background: url("{$oss}/web/static/birthday2/bitthday_icon.png") no-repeat center top;
        background-size: 100% auto;
        z-index: 10;
    }

    .content .top-box .avatar {
        width: 1.46rem;
        position: absolute;
        left: 3.02rem;
        top: 0.47rem;
        height: 1.46rem;
        border-radius: 0.73rem;
    }

    .content .top-box .avatar-icon {
        width: 1.17rem;
        position: absolute;
        left: 3.72rem;
        top: 0;
        height: 1.05rem;
        background: url("{$oss}/web/static/birthday2/wish_icon.png") no-repeat center top;
        background-size: 100% auto;
        z-index: 5;
    }
    .content .top-box .nickname{
        width: 100%;
        height: 0.40rem;
        line-height: 0.4rem;
        position: absolute;
        top: 3.03rem;
        left: 0;
        text-align: center;
        font-size: 0.28rem;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
        z-index: 15;
    }
    .content .top-box .astro-data-txt{
        width: 100%;
        height: 0.40rem;
        line-height: 0.4rem;
        position: absolute;
        top: 3.57rem;
        left: 0;
        text-align: center;
        font-size: 0.28rem;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 400;
        color: #333333;
        z-index: 15;
    }
    .content .content-box{
        width: 100%;
        height: 5.8rem;
        background: url("{$oss}/web/static/birthday2/a{$in_sign}.png") no-repeat center top;
        background-size: 100% auto;
    }
    .content .btn-box{
        width: 100%;
        height: 2.5rem;
    }
    .content .btn-box .birth_text{
        text-align: center;
        width: 100%;
        margin-top: 0.2rem;
    }
    .content .btn-box .birth_text:nth-child(1){
        height: 0.42rem;
        font-size: 0.30rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 0.42rem;
        margin-top: 0.27rem;
    }
    .content .btn-box .birth_text:nth-child(2){
        height: 0.42rem;
        font-size: 0.30rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 0.42rem;
    }
    .content .btn-box .birth_text:nth-child(3){
        height: 0.50rem;
        font-size: 0.36rem;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
        line-height: 0.50rem;
    }

    .birth_bottom {
        width: 89.333333%;
        height: auto;
        margin: 0.1rem auto 0.2rem;
        border-radius: 0.2rem;
        overflow: auto;
        overflow-x: hidden;
        position: relative;
    }

    .birth_bottom-bg {
        padding: 1.3rem 0 0.4rem;
        background: url("{$oss}/web/static/birthday2/birth_bottom.png?v=12") no-repeat center top;
        background-size: 100% auto;
    }

    .equity {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        width: 5.9rem;
        height: auto;
        margin: 0 auto;
    }

    .small_equity {
        width: 5.9rem;
        height: 1.6rem;
        margin-bottom: 0.3rem;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0rem 0.02rem 0.2rem 0rem rgba(0, 0, 0, 0.07);
        border-radius: 0.08rem;
        position: relative;
    }

    .small_equity:last-child {
        margin-bottom: 0;
    }

    .title {
        width: 1.6rem;
        height: 0.45rem;
        font-size: 0.32rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 0.45rem;
        position: relative;
        top: 0.39rem;
        left: 0.3rem;
    }

    .des {
        width: 3.9rem;
        height: 0.37rem;
        font-size: 0.26rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999990;
        line-height: 0.37rem;
        position: relative;
        top: 0.45rem;
        left: 0.3rem;
    }

    .coupon {
        width: 0.96rem;
        height: 0.96rem;
        position: absolute;
        top: 0.32rem;
        right: 0.39rem;
    }

    .message-box {
        width: 100%;
        position: fixed;
        bottom: 3.72rem;
        text-align: center;
        display: none;
        z-index: 1000;
    }

    .message {
        display: inline-block;
        font-size: 0.28rem;
        padding: 0.14rem 0.26rem;
        border-radius: 0.18rem;
        background-color: #6F6F6F;
        color: white;
    }

    .birth_bottom-title {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 1.3rem;
    }

    .birth_bottom-title div {
        width: 3.4rem;
        height: 0.83rem;
        margin: 0.24rem auto;
        background-color: white;
        color: #FD82A1;
        font-size: 0.42rem;
        text-align: center;
        line-height: 0.83rem;
        border-radius: 0.2rem;
    }

    .bot-msg {
        width: 100%;
        height: 0.4rem;
        font-size: 0.28rem;
        color: #999999;
        text-align: center;
        line-height: 0.4rem;
        padding-bottom: 0.4rem;
    }
</style>
<body>
<div class="content">
    <div class="top-box">
        <img class="avatar" src="{$oss}{$avatar}" alt="">
        <div class="bg-left"></div>
        <div class="avatar-icon"></div>
        <div class="bg-right"></div>
        <div class="bg-title"></div>
        <div class="nickname">{$nickname}</div>
        <div class="astro-data-txt">{$astro_data_text}</div>
    </div>
    <div class="content-box"></div>
    <div class="btn-box">
        <div class="birth_text">今天是你的公历生日</div>
        <div class="birth_text">{$birth_text}</div>
        <div class="birth_text">星座女神团队祝你生日快乐</div>
    </div>
</div>
<div class="birth_bottom">
    <div class="birth_bottom-bg">
        <div class="birth_bottom-title">
            <div>生日专属权益</div>
        </div>
        <div class="equity">
            {foreach $coupon as $cp}
            <div class="small_equity"
                 onclick="commonJsToNative('{$cp['target']}','{$cp['link']}','common_js_to_native','生日领取权益页-{$cp['link']}')">
                <p class="title">{$cp['name']}</p>
                <p class="des">{$cp['des']}</p>
                <img class="coupon" src="{$oss}{$cp['img']}" alt="">
            </div>
            {/foreach}
        </div>
    </div>
</div>
<div class="bot-msg">（生日权益已自动发送至卡券中心）</div>
<div class="message-box">
    <div class="message"></div>
</div>
</body>
<script src="{$oss}active/seven/js/jquery-v2.1.1.min.js"></script>
<script src="/static/vip/js/common_func.js?v=1"></script>
<script type="text/javascript">

    var app_type = '{$app_type}'
    var version = '{$version}'

    var birthdayGiveRes = {$boon_give_res};

    if (birthdayGiveRes.is_show_msg === 1) {
        message(birthdayGiveRes.msg);
    }

    function message(text) {
        $('.message').text(text);
        $('.message-box').show();
        setTimeout(function () {
            $('.message-box').hide();
        }, 2500);
    }

    /**
     * 通用跳转
     * @param target
     * @param link
     * @param umeng_event_name
     * @param umeng_event_label
     */
    function commonJsToNative(target, link, umeng_event_name, umeng_event_label) {
        if (!target)
            return;
        switch (app_type) {
            case 'ios':
                window.webkit.messageHandlers.commonJsToNative.postMessage({
                    'target': target,
                    'link': link,
                    'umeng_event_name': umeng_event_name,
                    'umeng_event_label': umeng_event_label
                });
                break;
            case 'android':
                console.log('android')
                if (version)
                    androidwebview.commonJsToNative(target, link, umeng_event_name, umeng_event_label)
                else
                    androidwebview.commonJsToNative(target, link)
                break;
            default:
                console.log('not ios or android')
                if ('link' == target) {
                    window.location.href = link
                }
        }
    }
</script>
{include file="../apps/web/view/public/sensors.html" /}
<script>
    var cnzz_s_tag = document.createElement('script');
    cnzz_s_tag.type = 'text/javascript';
    cnzz_s_tag.async = true;
    cnzz_s_tag.charset = 'utf-8';
    cnzz_s_tag.src = 'https://w.cnzz.com/c.php?id=1279031890&async=1';
    var root_s = document.getElementsByTagName('script')[0];
    root_s.parentNode.insertBefore(cnzz_s_tag, root_s);
</script>
</html>
